哈囉～歡迎來到「30天前端設計之旅」的DAY 11！今天將探索如何使用色彩和背景來讓網頁變得更加生動有趣。色彩是網頁設計中最有表現力的元素之一，而背景和漸層則能賦予頁面質感。

色彩的重要性
色彩不僅能夠吸引使用者的視覺焦點，還能傳達情感和品牌理念。正確使用色彩搭配，可以提升使用者體驗，並讓網站更有辨識度。今天將學習如何在 CSS 中應用色彩屬性，以及如何設計背景和漸層效果。

D-11的學習目標：

1. 色彩屬性（Color Properties）：
   • 基本色彩表示法：在 CSS 中使用不同的色彩表示法，包括命名顏色（如 red）、十六進位顏色（如 #ff0000）、RGB（如 rgb(255, 0, 0)）、RGBA（如 rgba(255, 0, 0, 0.5)）和 HSL（如 hsl(0, 100%, 50%)）等。
   • 透明度與不透明度：通過使用 RGBA 或 HSLA 表示法，可以設置色彩的透明度，這在設計具有層次感的背景或前景時非常有用。
2. 背景屬性（Background Properties）：
   • 背景顏色（Background Color）：使用 background-color 屬性設定元素的背景顏色。這是讓區塊或整個頁面突出顯眼的簡單方式。
   • 背景圖片（Background Image）：學習如何使用 background-image 屬性為元素設定背景圖片，以及如何控制背景圖片的顯示方式（如重複、位置、大小等）。可以選擇使用單一圖片、平鋪圖片，或甚至設置響應式背景圖片。
   • 背景疊加（Background Overlay）：通過結合背景圖片與半透明的背景顏色，你可以創建出色的背景疊加效果，使文字或其他內容更加清晰易讀。
3. 漸層函數（Gradient Functions）：
   • 線性漸層（Linear Gradient）：使用 linear-gradient() 函數創建線性漸層效果。可以設置漸層的角度、顏色過渡點，以及多個顏色的漸層過渡效果。例如：background: linear-gradient(90deg, red, blue); 這段CSS將創建從紅色到藍色的水平漸層背景。
   • 放射狀漸層（Radial Gradient）：使用 radial-gradient() 創建放射狀漸層效果，通常以圓形或橢圓形的形式從中心向外擴展。這種效果非常適合創建背景或裝飾元素，讓頁面更具動感。
     漸層的進階應用：學習如何結合多個漸層，創建複雜且富有創意的背景效果，並了解如何使用漸層來替代圖片，減少加載時間並提升頁面性能。

色彩與背景設計是提升網頁視覺吸引力的關鍵之一，開始探索這些工具，讓網頁設計更加活靈活現吧！🎨🌈